<template>
  <div class="content">
    <div class="top">
      <div>
        <p class="number">
          <!-- {{fdc_zfbz_gzf_bzzfs}} -->
          <countTo :endVal="fdc_zfbz_gzf_bzzfs" />
        </p>
        <p>住房保障数</p>
      </div>
      <div :class="current==0?'actived':''">
        <p class="number">
          <!-- {{fdc_zfbz_gzf_sqrs}} -->
          <countTo :endVal="fdc_zfbz_gzf_sqrs" />
        </p>
        <p>申请人数</p>
      </div>
      <div :class="current==1?'actived':''">
        <p class="number">
          <!-- {{fdc_zfbz_gzf_btffhs}} -->
          <countTo :endVal="fdc_zfbz_gzf_btffhs" />
        </p>
        <p>补贴发放户数</p>
      </div>
      <div :class="current==2?'actived':''">
        <p class="number">
          <!-- {{fdc_zfbz_gzf_btffje}} -->
          <countTo :endVal="fdc_zfbz_gzf_btffje" />
        </p>
        <p>补贴发放金额</p>
      </div>
    </div>
    <Rotation
      :IntervalTime="5000"
      :w="45.37"
      :w_unit="'rem'"
      :h="'34rem'"
      :len="charts.length"
      :current="current"
      @changeCurrent="changeCurrentType"
    >
      <div class="echarts" v-for="(item,index) in charts" :key="index">
        <Chart :id="year+item" />
      </div>
    </Rotation>
  </div>
</template>

<script>
import Rotation from "@/components/common/Rotation";
import Chart from "./housingSecurityChart";
export default {
  name: "HousingSecurity",
  props: ["year"],
  data: () => {
    return {
      current: -1,
      fdc_zfbz_gzf_bzzfs: 0,
      fdc_zfbz_gzf_sqrs: 0,
      fdc_zfbz_gzf_btffhs: 0,
      fdc_zfbz_gzf_btffje: 0,
      charts: ["sqrs", "btffhs", "btffje"]
    };
  },
  components: {
    Rotation,
    Chart
  },
  methods: {
    changeCurrentType(index) {
      console.log(index);
      this.current = index;
    },
    getData() {
      const { year } = this;
      this.http
        .post("", {
          path: "st",
          groupid: 22,
          year: year
        })
        .then(res => {
          console.log("住房保障data:" + res.data);
        });
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style lang="scss" scoped>
.content {
  width: 45.87rem;
  .top {
    margin-top: 4rem;
    display: flex;
    > div {
      width: 9.38rem;
      height: 5.38rem;
      background: url("../../../assets/background/estate/bg_living.png")
        no-repeat center;
      background-size: 100% 100%;
      margin: 0 1rem;
      padding: 0.5rem;
      &.actived {
        background: url("../../../assets/background/estate/bg_livingActived.png")
          no-repeat center;
        background-size: 100% 100%;
      }
      p {
        color: #bed7fa;
        font-size: 1.077rem;
      }
      .number {
        font-size: 1.846rem;
        line-height: 1.5em;
        letter-spacing: 0.036em;
        color: #fff;
      }
    }
  }
  .echarts {
    width: 45.37rem;
    height: 34rem;
    padding: 0 1rem;
  }
}
</style>